<%-- 
    Document   : new
    Created on : 6/Jun/2009, 18:26:14
    Author     : eurico
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="deti.es.ukni.cm.account.AccountBean"%>
<%@page import="deti.es.ukni.persistence.entity.*" %>
<%@page import="java.util.*" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

 <%
    AccountBean curAccount = (AccountBean) session.getAttribute("account");
    if ( curAccount == null )
        response.sendRedirect("../account/login.jsp");
    else{
        if ( curAccount.hasBand() == false  )
            response.sendRedirect("../account");
 %>
 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="../resource/myband.css" />
        <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
        <title>My Band </title>
        <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA-IxVtEF80D4xYMtKixTl9xTwM0brOpm-All5BF6PoaKBxRWWERTJYYYTq_EhpUWmZOadEtkHw-UC6Q"></script>
      
        <script>
            google.load("maps", "2");
            google.load("jquery","1.3.2" );
            google.load("jqueryui", "1.7.2");

            google.setOnLoadCallback( function(){

                //$("#newelementform").validate();
                //$("#neweventform").validate();
                //$("#newvideoform").validate();

                $(".datepicker").datepicker({
                    onSelect: function(dateText, inst){
                        $("#eventdate").attr("value", dateText);
                    }
                });


                $("#eventdate").attr("value", $(".datepicker").datepicker('getDate') );

                // create the map
                $(".map").each( function(){
                    var map = new google.maps.Map2(this);
                    var lat = parseFloat( $(this).attr("lat") );
                    var lng = parseFloat( $(this).attr("lng") );
                    var ll  = new google.maps.LatLng(lat, lng);
                    var mark = new google.maps.Marker(ll, { draggable: true} );

                    var setlat = $("#lat");
                    var setlng = $("#lng");

                    GEvent.addListener(mark, "dragend", function() {
                        var point = mark.getPoint();
                        map.panTo(point);
                        setlat.attr('value', point.lat() );
                        setlng.attr('value', point.lng() );
                    });

                   GEvent.addListener(map, "moveend", function() {
                        map.clearOverlays();
                        var center = map.getCenter();
                        var marker = new GMarker(center, {draggable: true});
                        map.addOverlay(marker);
                        setlat.attr('value', center.lat() );
                        setlng.attr('value', center.lng() );


                        GEvent.addListener(marker, "dragend", function() {
                            var point = marker.getPoint();
                            map.panTo(point);
                            setlat.attr('value', point.lat() );
                            setlng.attr('value', point.lng() );
                        });
                    });


                    map.addControl( new GMapTypeControl() );
                    map.addControl( new GLargeMapControl() );
                    map.enableGoogleBar();
                    //map.enableScrollWheelZoom();
                    map.setCenter(ll, 13);
                    mark.show();
                    map.addOverlay( mark );
                });

                $(".toggle ~ div").hide();
                $(".toggle").each( function() {
                   $(this).click( function(){
                       $(this).siblings("div").toggle();
                   });

                });

            });
        </script>

        <!--<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
-->
    </head>
    <body>
        <div id="header">
            <div id="logo">
                <img src="../resource/mybandlogo.png" alt="myband_logo"/>
            </div>
        </div>

        <div id="nav">
            <a href="../account/logout.jsp">Logout</a>
            <ul>
                <li><a href="../account/index.jsp">Account</a></li>
                <li><a href="../band">Search Bands</a> </li>
                <li><a href="../band">Friends</a> </li>
                <li><a href="../account/favorite.jsp">Your Favorite Bands</a></li>

            </ul>
        </div>

        <div id="content">

            <h1 class="bandname"><a href="view/index.jsp?id=<%= curAccount.getBand().getIdband() %>"><%= curAccount.getBand().getName() %></a></h1>
                <div class="view">
                    <ul>
                        <li>View Events</li>
                    </ul>
                </div>
            <div class="create_new">
                <span class="toggle title">Add a new band element</span>
                <span class="desc">a band is not a band without its elements.</span>
                <div class="addelement">
                    <form id="newelementform" method="post" action="element/new">
                        <label for="ename">Name</label>
                        <input id="ename" type="text" name="name" class="required"><p>
                        <label for="erole">Role</label>
                        <input id="erole"type="text" name="role" class="required"><p>
                        <label for="ebio">Biography</label>
                        <textarea id="ebio" name="bio" cols="30" rows="10">
                            Element Biography
                        </textarea><p>
                        <input type="submit" value="Create">
                    </form>
                </div>
            </div>
            <div class="create_new">
                <span class="toggle title">Create a new event</span>
                <span class="desc">tell your fans where you are going to be.</span>
                <div class="addelement">
                    <form id="neweventform" method="post" action="event/new">
                        <label for="evname">Description</label>
                        <input id="evname" style="width:30em;" type="text" name="location" class="required"><p>
                        <div class="map" style="height: 350px; width: 550px;"  lat="40.64118" lng="-8.65362"></div>
                        <p>
                        <div class="datepicker"></div><p>
                        <input id="lat" type="hidden" name="lat" value="40.64118">
                        <input id="lng" type="hidden" name="lng" value="-8.65362">
                        <input id="eventdate" type="hidden" name="eventdate">
                        <input type="submit" value="Create">
                    </form>
                </div>
            </div>
            <div class="create_new">
                <span class="toggle title">Post a new video</span>
                <span class="desc">every fan likes to see their favorite band perform</span>
                <div class="addelement">
                    <form id="newvideoform" method="post" action="video/new">
                        <label for="vname">Name</label>
                        <input id="vname" type="text" name="name" class="required"><p>
                        <label for="vdesc">Description</label>
                        <input id="vdesc"type="text" name="desc" class="required"><p>
                        <label for="vembed">Biography</label>
                        <textarea class="required" id="vembed" name="embed" cols="30" rows="10"></textarea><p>
                        <input type="submit" value="Create">
                    </form>
                </div>
            </div>

        </div>
    </body>
</html>

<% }%>
